<template>
	<view class="center">
		<!-- <view class="h-88 flex-a p-l-15">
			<uv-icon name="arrow-left" size="22" color="" @click="toGrab"></uv-icon>
		</view> -->
		<view class="flex-column">
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r" style="background-color: #fff;width: 95%;">
				<view class="flex-a">
					<uv-icon name="map" size="18"></uv-icon>
					<text class="m-l-10 size-28">城市:</text>
					<text class="m-l-10 size-28 bold" style="color: #122f84;"  @click="copy(orderInfo.newOrderContent.cityName)">{{orderInfo.newOrderContent.cityName}}</text>
					<!-- <uv-button text="复制" size="mini" style="margin-left: 10rpx;"></uv-button> -->
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="home" size="18"></uv-icon>
					<text class="m-l-10 size-28">门店:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeName)">{{orderInfo.storeName}}</text>
					<!-- <uv-button @click="copy(orderInfo.storeName)" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button> -->
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="empty-order" size="18"></uv-icon>
					<text class="m-l-10 size-28">店铺ID:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeCode)">{{orderInfo.storeCode}}</text>
					<!-- <uv-button @click="copy(orderInfo.storeCode)" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button> -->
				</view>
				<!-- <view class="flex-a m-t-10">
					<uv-icon name="phone" size="18"></uv-icon>
					<text class="m-l-10 size-28">用户手机号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;"></text>
					<uv-button @click="copy" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button>
				</view> -->
				<view class="flex-a m-t-10">
					<uv-icon name="file-text" size="18"></uv-icon>
					<text class="m-l-10 size-28">订单号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.id)">{{orderInfo.id}}</text>
					<!-- <uv-button @click="copy(orderInfo.id)" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button> -->
				</view>
				<view v-if="type==2" class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #122f84;border-radius: 0 20rpx 0 20rpx;">
					已抢单
				</view>
			</view>
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r m-t-20" style="background-color: #fff;width: 95%;">
				<view class="flex-b">
					<!-- 肯德基 -->
					<view class="flex" v-if="orderInfo.platform==2">
						<view class="w-100 h-100">
							<image v-if="orderInfo.productImg" class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].showNameCn}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view class="" v-for="item1 in kdjGenerateString(item)">
										{{item1}}
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<!-- 瑞幸 -->
					<view class="flex" v-if="orderInfo.platform==3">
						<view class="w-100 h-100">
							<image v-if="orderInfo.productImg" class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view class="size-25">
								{{JSON.parse(orderInfo.newOrderContent.orderContent).packets[0].products[0].strValue}}
							</view>
						</view>
					</view>
					<!-- 汉堡王 -->
					<view class="flex" v-if="orderInfo.platform==4">
						<view class="w-100 h-100">
							<image v-if="orderInfo.productImg" class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].shortName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view class="" v-for="item1 in generateString(item)">
										{{item1}}
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<!-- 德克士 -->
					<view class="flex" v-if="orderInfo.platform==6">
						<view class="w-100 h-100">
							<image v-if="orderInfo.productImg" class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].name}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="black">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view v-if="item.option_list">
										<view v-for="item1 in dksGenerateString(item)">
											{{item1}}
										</view>
									</view>
									<view v-else>
										<view v-for="item4 in item2.coupon_list[0].condiment_list">
											{{item4.name}}
										</view>
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="text-r" v-if="orderInfo">
				 <text class="bold size-28">到手价：</text> <text class="bold size-20">￥</text><text class="bold" style="color: red;">{{orderInfo.realTotalAmount}}</text>
				</view>
			</view>
		</view>
		<view class="p-y-20 p-x-20 bs-bx" style="position: fixed;bottom: 0%;background-color: #fff;width: 100%;text-align: center;left: 0%;">
<!-- 			<view v-if="type==1" @click="grabOk" class="p-y-20 white bold radius-15 bs-bx" style="background-color: #122f84;text-align: center;">
				抢单
			</view> -->
			<view v-if="type==2" @click="goReport" class="p-y-20 white bold radius-15 bs-bx" style="background-color: #122f84;text-align: center;">
				去上报
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
		onLaunch,
		onReady,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {generateString,dksGenerateString,kdjGenerateString} from '@/utils/shopStr.js'
	import {grabInfo,grabTo} from '@/api/index.js'
	import {dataGong,sortJsonKeys,sortAndFormatParams,combine} from '@/utils/encryption.js'
	let orderId = ref()
	let merchantId = ref()
	let orderInfo = ref()
	let orderList = ref()
	let type = ref()
	let status = ref()
	const shadowStyle = ref({
		boxShadow: 'none' 
	})
	onLoad((value)=>{
		if(value.id && value.status && value.type){
			orderId.value = value.id
			merchantId.value = value.merchantId
			type.value = value.type
			status.value = value.status
			getGrabInfo()
		}
	})
	const getGrabInfo = ()=>{
		let cityJinWei = {
			id:orderId.value,
			merchantId:merchantId.value,
			status:status.value,
			...dataGong()
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		grabInfo(cityJinWei,combineTrue).then(res=>{
			if(res.data){
				console.log(res);
				if(res.data){
					orderInfo.value = res.data
					orderList.value = orderInfo.value.newOrderContent
				}
			}
		})
	}
	
	// const grabOk = () => {
	// 	let id = orderInfo.value.id
	// 	const pages = getCurrentPages();  // 无需import
	// 	const page = pages[pages.length - 1];
	// 	const eventChannel = page.getOpenerEventChannel()
	// 	console.log(eventChannel);
	// 	eventChannel.emit('grabOkEvent', id);
	// 	let cityJinWei = {
	// 		id:id,
	// 		...dataGong()
	// 	}
	// 	let cenShi = JSON.stringify(sortJsonKeys(cityJinWei)) //请求序列化并变成字符串
	// 	let combineTrue = combine(cenShi, cityJinWei.timestamp)
	// 	grabTo(cityJinWei,combineTrue).then(res=>{
	// 		if(res.code==0){
	// 			uni.showToast({
	// 				title: res.message,
	// 				icon: "none",
	// 			})
	// 			uni.navigateTo({
	// 				url:`/pagesA/grab/grabQuotation?id=${id}&type=2&status=2`
	// 			})
	// 		} else {
	// 			uni.showToast({
	// 				title: res.message,
	// 				icon: "none",
	// 			})
	// 		}
	// 	})
	// }
	
	const toGrab = ()=>{
		uni.navigateTo({
			url:'/pagesA/grab/grabRx'
		})
	}
	const copy = (value)=>{
		uni.setClipboardData({
			data: value,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: "none",
				})
			}
		});
	}
	
	const goReport = ()=>{
		uni.navigateTo({
			url:`/pagesA/grab/report?id=${orderId.value}`
		})
	}
</script>

<style lang="scss" scoped>
  ::v-deep .uv-button--mini {
	  height: 40rpx !important; 
	  padding: 0 !important;
  }
  .center {
	  margin-bottom: 120rpx;
  }
</style>
